<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <!-- 第二步v-for 遍历list 数组 -->
    <li :class="{completed: item.isDone}"  v-for="(item,index) in list" :key="index"> 
      <div class="view">

        <input class="toggle" type="checkbox"  v-model="item.isDone" />
        <label>{{item.name}}</label>
        <!-- 第三步点击删除功能 -->
        <button class="destroy" @click="del(item.id)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  props: {
   list: {
         type: Array,
          // 验证必须传过来的数据 不传数据则报错
         required:true
       }
  },
   methods: {
     del(id){
      //  执行父组件里的删除要求
       this.$emit('del', id);
     }
   },
}

</script>